@use "abstracts/variables" as *;
@use "abstracts/mixins" as *;

.composition {
    position: relative;
    min-height: 40rem;

    &__photo {
        width: 55%;
        box-shadow: 0 1.5rem 4rem rgba($color-black, 0.4);
        position: absolute;
        transition: all .2s;
        // z-index: 10;
        outline-offset: 2rem;

        &--p1 {
            left: 0;
            top: -2rem;
        }

        &--p2 {
            right: 0;
            top: 2rem;
        }

        &--p3 {
            left: 20%;
            top: 10rem;
        }

        &:hover {
            outline: 1.5rem solid $color-primary;
            transform: scale(1.05) translateY(-.5rem);
            box-shadow: 0 2.5rem 4rem rgba($color-black, .5);
            z-index: 20;
        }
    }

    //注意下面这个选择器的写法
    &:hover &__photo:not(:hover) {
        transform: scale(0.95);
    }
}